<template>
<!-- 试题录入 -->
  <div class='container'>
    <el-card>
       <span>试题录入</span>
       <el-divider></el-divider>
        <!-- <el-form v-if="detail" ref="formRef" :model="submmitForm" :rules="formRules"  label-width="100px" class="demo-ruleForm">
           <el-form-item label="学科" prop="subjectID">
              <el-select  v-model="submmitForm.subjectName"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.subjectName"
                 ></el-option>
              </el-select>

            </el-form-item>
           <el-form-item label="目录" prop="catalogID">
              <el-select  v-model="detail.directoryName" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.directoryName"
                 >
                 {{detail.directoryName}}
                 </el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="企业" prop="enterpriseID">
              <el-select  v-model="detail.enterpriseID" placeholder="请选择" style="width: 400px">
                 <el-option></el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="城市" prop="province">
              <el-select  @change= "getCity" v-model="detail.province" class="el-select"  placeholder="请选择" style="width: 195px">
                 <el-option>{{detail.province}}</el-option>
              </el-select>
              <el-select  v-model="detail.city" placeholder="请选择" style="width: 195px">
                 <el-option
                 :value="detail.city"
                 :label="detail.city"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" prop="direction">
              <el-select  v-model="detail.direction" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.direction"
                 :value="detail.direction"
                 >
                 {{detail.direction}}
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型" prop="questionType">
              <el-radio-group  v-model="detail.questionType">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度" prop="difficulty">
             <el-radio-group  v-model="detail.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干" prop="question">
              <quill-editor  v-model="detail.question"></quill-editor>
            </el-form-item>

            <el-form-item label="选项" v-if="submmitForm.questionType === '1'" >

                <el-radio label="A" v-model="value"  @change="change">
                  A:
                  <el-input v-model="submmitForm.options[0].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="B"  v-model="value" @change="change">
                  B:
                  <el-input v-model="submmitForm.options[1].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="C" v-model="value" @change="change">
                  C:
                  <el-input v-model="submmitForm.options[2].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>

                <el-radio label="D" v-model="value" @change="change">
                  D:
                  <el-input v-model="submmitForm.options[3].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>

            </el-form-item>

            <el-form-item>
              <el-button type="danger">+增加选项答案</el-button>
            </el-form-item>

             <el-form-item  label="解析视频">
               <el-input v-model="submmitForm.videoURL" style="width: 400px"></el-input>
            </el-form-item>

            <el-form-item  label="答案解析" prop="answer">
              <quill-editor  v-model="detail.answer"></quill-editor>
              <quill-editor  v-model="submmitForm.answer"></quill-editor>
            </el-form-item>

            <el-form-item label="题目备注">
              <el-input
                type="textarea"
                style="width: 400px"
                :rows="4"
                placeholder="请输入内容"
                v-model="submmitForm.remarks">
              </el-input>
            </el-form-item>

            <el-form-item label="试题标签">
              <el-select v-model="submmitForm.tags"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.tags"
                 :value="item.tags"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="updateList">确认提交</el-button>
            </el-form-item>
       </el-form> -->

        <el-form  ref="formRef" :model="submmitForm" :rules="formRules"  label-width="100px" class="demo-ruleForm">
           <el-form-item label="学科" prop="subjectID">
              <el-select v-model="submmitForm.subjectID"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.subjectName"
                 :value="item.id"
                 v-for="(item, index) in subject"
                 :key="index"
                 >{{item.subjectName}}</el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="目录" prop="catalogID">
              <el-select v-model="submmitForm.catalogID" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.catalog"
                 :value="item.catalogID"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="企业" prop="enterpriseID">
              <el-select  v-model="submmitForm.enterpriseID" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.enterprise"
                 :value="item.enterpriseID"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 ></el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="城市" prop="province">
              <el-select  @change= "getCity" v-model="submmitForm.province" class="el-select"  placeholder="请选择" style="width: 195px">
                 <el-option
                 v-for="(item,index) in provincest"
                 :label="item"
                 :value="item"
                 :key="index">
                 </el-option>
              </el-select>
              <el-select  v-model="submmitForm.city" placeholder="请选择" style="width: 195px">
                 <el-option
                 v-for="(item, index) in cityarea"
                 :key="index"
                 :value="item"
                 :label="item"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" prop="direction">
              <el-select v-model="submmitForm.direction" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item"
                 :value="item"
                 v-for="(item, index) in directions"
                 :key="index"
                 >
                 {{item}}
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型" prop="questionType">
              <el-radio-group  v-model="submmitForm.questionType">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度" prop="difficulty">
             <el-radio-group  v-model="submmitForm.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干" prop="question">
              <quill-editor  v-model="submmitForm.question"></quill-editor>
            </el-form-item>
            <el-form-item label="选项" v-if="submmitForm.questionType === '1'" >

                <el-radio label="A" v-model="value"  @change="change">
                  A:
                  <el-input v-model="submmitForm.options[0].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="B"  v-model="value" @change="change">
                  B:
                  <el-input v-model="submmitForm.options[1].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="C" v-model="value" @change="change">
                  C:
                  <el-input v-model="submmitForm.options[2].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>

                <el-radio label="D" v-model="value" @change="change">
                  D:
                  <el-input v-model="submmitForm.options[3].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>

            </el-form-item>

            <el-form-item>
              <el-button type="danger">+增加选项答案</el-button>
            </el-form-item>

             <el-form-item  label="解析视频">
               <el-input v-model="submmitForm.videoURL" style="width: 400px"></el-input>
            </el-form-item>

            <el-form-item  label="答案解析" prop="answer">
              <quill-editor v-model="submmitForm.answer"></quill-editor>
            </el-form-item>

            <el-form-item label="题目备注">
              <el-input
                type="textarea"
                style="width: 400px"
                :rows="4"
                placeholder="请输入内容"
                v-model="submmitForm.remarks">sss
              </el-input>
            </el-form-item>

            <el-form-item label="试题标签">
              <el-select v-model="submmitForm.tags"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.tags"
                 :value="item.tags"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addSubmit">确认提交</el-button>
            </el-form-item>
       </el-form>
        <!-- <el-form ref="formRef" :model="submmitForm" :rules="formRules"  label-width="100px" class="demo-ruleForm">
           <el-form-item label="学科" prop="subjectID">
              <el-select v-if="detail" v-model="detail.subjectName"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.subjectName"
                 ></el-option>
              </el-select>
              <el-select v-else v-model="submmitForm.subjectID"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.subjectName"
                 :value="item.id"
                 v-for="(item, index) in subject"
                 :key="index"
                 >{{item.subjectName}}</el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="目录" prop="catalogID">
              <el-select v-if="detail" v-model="submmitForm.directoryName" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.directoryName"
                 >
                 </el-option>
              </el-select>
              <el-select v-else v-model="submmitForm.catalogID" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.catalog"
                 :value="item.catalogID"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="企业" prop="enterpriseID">
              <el-select v-if="detail" v-model="detail.enterpriseID" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.enterprise"
                 ></el-option>
              </el-select>
              <el-select v-else v-model="submmitForm.enterpriseID" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.enterprise"
                 :value="item.enterpriseID"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 ></el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="城市" prop="province">
              <el-select v-if="detail"  @change= "getCity" v-model="detail.province" class="el-select"  placeholder="请选择" style="width: 195px">
                 <el-option>{{detail.province}}</el-option>
              </el-select>
              <el-select v-else  @change= "getCity" v-model="submmitForm.province" class="el-select"  placeholder="请选择" style="width: 195px">
                 <el-option
                 v-for="(item,index) in provincest"
                 :label="item"
                 :value="item"
                 :key="index">
                 </el-option>
              </el-select>
              <el-select v-if="detail" v-model="detail.city" placeholder="请选择" style="width: 195px">
                 <el-option
                 >
                 {{detail.city}}
                 </el-option>
              </el-select>
              <el-select v-else v-model="submmitForm.city" placeholder="请选择" style="width: 195px">
                 <el-option
                 v-for="(item, index) in cityarea"
                 :key="index"
                 :value="item"
                 :label="item"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" prop="direction">
              <el-select v-if="detail" v-model="detail.direction" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="detail.direction"
                 :value="detail.direction"
                 >
                 {{detail.direction}}
                 </el-option>
              </el-select>
              <el-select v-else v-model="submmitForm.direction" placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item"
                 :value="item"
                 v-for="(item, index) in directions"
                 :key="index"
                 >
                 {{item}}
                 </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型" prop="questionType">
              <el-radio-group v-if="detail" v-model="detail.questionType">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
              <el-radio-group v-else v-model="submmitForm.questionType">
                <el-radio label="1">单选</el-radio>
                <el-radio label="2">多选</el-radio>
                <el-radio label="3">简答</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="难度" prop="difficulty">
             <el-radio-group v-if="detail" v-model="detail.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
             <el-radio-group v-else v-model="submmitForm.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">一般</el-radio>
                <el-radio label="3">困难</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干" prop="question">
              <quill-editor v-if="detail" v-model="detail.question"></quill-editor>
              <quill-editor v-else v-model="submmitForm.question"></quill-editor>
            </el-form-item>

            <el-form-item label="选项" v-if="submmitForm.questionType === '1'" >

                <el-radio label="A" v-model="value"  @change="change">
                  A:
                  <el-input v-model="submmitForm.options[0].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="B"  v-model="value" @change="change">
                  B:
                  <el-input v-model="submmitForm.options[1].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
                <el-radio label="C" v-model="value" @change="change">
                  C:
                  <el-input v-model="submmitForm.options[2].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>

                <el-radio label="D" v-model="value" @change="change">
                  D:
                  <el-input v-model="submmitForm.options[3].title" class="elInput" placeholder="请输入内容" style="width: 300px"></el-input>
                </el-radio>
            </el-form-item>

            <el-form-item>
              <el-button type="danger">+增加选项答案</el-button>
            </el-form-item>

             <el-form-item  label="解析视频">
               <el-input v-model="submmitForm.videoURL" style="width: 400px"></el-input>
            </el-form-item>

            <el-form-item  label="答案解析" prop="answer">
              <quill-editor v-if="detail" v-model="detail.answer"></quill-editor>
              <quill-editor v-else v-model="submmitForm.answer"></quill-editor>
            </el-form-item>

            <el-form-item label="题目备注">
              <el-input
                type="textarea"
                style="width: 400px"
                :rows="4"
                placeholder="请输入内容"
                v-model="submmitForm.remarks">
              </el-input>
            </el-form-item>

            <el-form-item label="试题标签">
              <el-select v-model="submmitForm.tags"  placeholder="请选择" style="width: 400px">
                 <el-option
                 :label="item.tags"
                 :value="item.tags"
                 v-for="(item, index) in tlsit"
                 :key="index"
                 ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addSubmit">确认提交</el-button>
            </el-form-item>
       </el-form> -->

    </el-card>

  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { list as clist } from '@/api/hmmm/companys'
import { list as mlist } from '@/api/hmmm/directorys'
import { list as tlist, add, detail, update } from '@/api/hmmm/questions'

import { provinces, citys } from '@/api/hmmm/citys'
import { direction } from '@/api/hmmm/constants'

export default {
  name: 'questionnew',
  components: {

  },
  data () {
    return {
      value: '',
      submmitForm: {
        subjectID: null,
        catalog: '',
        shortName: '',
        province: '',
        direction: '',
        subject: null,
        difficulty: '1',
        questionType: '1',
        question: '',
        answer: '',
        city: '',
        catalogID: null,
        senterpriseID: null,
        videoURL: '',
        remarks: '',
        tags: '',
        options: [
          { code: 'A', title: '', img: '', isRight: '' },
          { code: 'B', title: '', img: '', isRight: '' },
          { code: 'C', title: '', img: '', isRight: '' },
          { code: 'D', title: '', img: '', isRight: '' }
        ]
      },

      // 学科
      subject: {},
      companys: {},
      cityarea: [],
      tlsit: {},
      id: '',
      detail: {},
      directions: direction,
      // 企业
      provincest: [],
      catalog: {},
      formRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        shortName: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择县区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        subject: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请添加题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请添加答案解析', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取学科列表
    async loadSubject () {
      try {
        const { data } = await list()
        console.log(data)
        this.subject = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 获取企业列表
    async onLoadInfo () {
      try {
        const { data } = await clist({
          page: 1,
          pagesize: 2
        })
        console.log(data)
        this.companys = data.items
      } catch (err) {
        console.log(err)
      }
      this.provincest = provinces()
      // console.log(this.provincest)
    },
    // 获取城市
    getCity () {
      this.cityarea = citys(this.submmitForm.province)
      console.log(123)
      console.log(this.cityarea)
    },
    // 获取目录
    async catalogList () {
      try {
        const { data } = await mlist({
          page: 1,
          pagesize: 2
        })
        console.log(data)
        this.catalog = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 获取题库列表
    async loadtList () {
      try {
        const { data } = await tlist({
          page: 1,
          pagesize: 10
        })
        console.log(data)
        this.tlsit = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 添加题目
    async addSubmit () {
      this.$refs.formRef.validate(valid => {
        if (!valid) return false
      })
      try {
        const { data } = await add(this.submmitForm)
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    // 回显数据
    async loaddetail () {
      console.log(123)
      const res = { id: this.id }
      try {
        const { data } = await detail(res)
        console.log(data)
        this.detail = data
      } catch (err) {
        console.log(err)
      }
    },

    // 修改题库
    async updateList () {
      try {
        await update({
          id: this.detail.id
        })
      } catch (err) {
        console.log(err)
      }
    },

    change (val) {
      console.log(val)
      if (val === 'A') {
        this.submmitForm.options[0].isRight = 1
        this.submmitForm.options[1].isRight = 0
        this.submmitForm.options[2].isRight = 0
        this.submmitForm.options[3].isRight = 0
      } else if (val === 'B') {
        this.submmitForm.options[1].isRight = 1
        this.submmitForm.options[0].isRight = 0
        this.submmitForm.options[2].isRight = 0
        this.submmitForm.options[3].isRight = 0
      } else if (val === 'C') {
        this.submmitForm.options[2].isRight = 1
        this.submmitForm.options[0].isRight = 0
        this.submmitForm.options[1].isRight = 0
        this.submmitForm.options[3].isRight = 0
      } else {
        this.submmitForm.options[3].isRight = 1
        this.submmitForm.options[0].isRight = 0
        this.submmitForm.options[1].isRight = 0
        this.submmitForm.options[2].isRight = 0
      }
    }
  },
  created () {
    this.loadSubject()
    this.onLoadInfo()
    this.catalogList()
    this.loadtList()
    this.loaddetail()
    // 接受当前编辑项的id
    this.id = this.$route.query.id
  }

}
</script>

<style scoped >
.container{
  padding: 10px;
}
.el-select{
  margin-left: 10px;
}
.upload{
  height: 50px;
  border: 1px dashed #d9d9d9;
  background-color: #ffffff;
}
.upload-demo {
  display: inline-block;
  margin-left: 20px;
}

.radioGroup{
  display: flex;
  flex-direction: column;
}
.elInput{
  padding-left: 30px;
  margin-top: 10px;
}

</style>
